<template>
	
	
	<h3>通讯录</h3>
	<el-divider />
	
	<el-row style="margin-bottom: 10px;">
		<el-col :span="12">
			<el-input
			    v-model="checkname"
				placeholder="请输入联系人姓名"
			    show-word-limit
			    type="text"
			  />	
		</el-col>
		<el-col :span="6" style="text-align: left;padding-left: 10px;">
			<el-button @click="getCheckRes(checkname)"><el-icon><Search /></el-icon></el-button>
		</el-col>
		<el-col :span="6">
			<el-button @click="cancel">清空搜索框</el-button>
			
		</el-col>
	</el-row>
		
	 
	
	<el-table :data="contact"
	          :default-sort="{ prop: 'time', order: 'descending' }" 
			  stripe 
			  border 
			  style="width: 100%">
	    <el-table-column prop="name" label="姓名" width="150" />
	    <el-table-column prop="phone" label="联系方式" width="250" />
	    <el-table-column prop="email" label="电子邮箱" width="250"/>
		<el-table-column prop="depart" label="部门" width="200"/>
		<el-table-column prop="company" label="公司" />
	  </el-table>
	  
	  
	  <!-- 查询结果对话框 -->
	  <el-dialog v-model="checkDialogFormVisble" title="查询结果">
	  		  <el-table :data="result"
	  		  		  stripe 
	  		  		  border 
					  empty-text="没有查到相关联系人"
	  		  		  style="width: 100%">
	  		      <el-table-column prop="name" label="姓名" width="100" />
	  		      <el-table-column prop="phone" label="联系方式" width="250" />
	  		      <el-table-column prop="email" label="电子邮箱" />
	  		  	<el-table-column prop="depart" label="部门" />
	  		  	<el-table-column>
	  		  		<template #default="scope">
	  		  			
	  		  		</template>
	  		  		
	  		  	</el-table-column>
	  		    </el-table>
	  		  
	  </el-dialog>
	
	
</template>

<script>
	import { ElMessage } from 'element-plus'
	import qs from 'qs'
	export default {
		data(){
			return{
				checkDialogFormVisble:false,
				contacter:[],
				contact:[],
				updateDraft:{},
				checkname:"",
				result:[]
			}
		},
		methods:{
			getSQL(){
				let that=this
				this.$axios.get("http://localhost:8080/write/contact").then(function(res){
						that.contact=res.data
					})
			},
			getCheckRes(cn){
				let that=this
				this.$axios.get("http://localhost:8080/write/check",{
					params:{
						checkname:cn
					}
				}).then(function(res){
					that.result=res.data
				})
				that.checkDialogFormVisble=true
				
			},
			cancel(){
				this.checkname=null
			},
			close(){
			    this.updateDialogFormVisble=false
			    this.getSQL()	
			},
			saveUpdate(){
				if(this.updateDraft.recipient==null||this.updateDraft.recipient=="")
				{
					ElMessage.error('请选择收信人！')
				}
				else if(this.updateDraft.title==null||this.updateDraft.title=="")
				{
					ElMessage.error('请添写邮件主题！')
				}
				else{
				this.updateDraft.time=null
				let that=this
				let str=qs.stringify(that.updateDraft)
				this.$axios.get("http://localhost:8080/draft/update?"+str).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '修改成功！',
						    type: 'success',
						  })
						  that.updateDialogFormVisble=false
						  that.getSQL()
						  
					}
					else{
						ElMessage.error('修改失败！')
					}
					})
					}
			},
			openUpdate(row){
				this.updateDraft=row
				this.updateDialogFormVisble=true
				
			},
			sendSuccess(){
				if(this.updateDraft.recipient==null||this.updateDraft.recipient=="")
				{
					ElMessage.error('请选择收信人！')
				}
				else if(this.updateDraft.title==null||this.updateDraft.title=="")
				{
					ElMessage.error('请添写邮件主题！')
				}
				else{
				this.updateDraft.time=null
				let that=this
				let str=qs.stringify(that.updateDraft)
				this.$axios.get("http://localhost:8080/write/insert?"+str).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '发送成功！',
						    type: 'success',
						  })
						  that.updateDialogFormVisble=false
						  that.getSQL()
						  
					}
					else{
						ElMessage.error('发送失败！')
					}
					})
					}
					this.updateDialogFormVisble=false
					this.getSQL()
			}
			
		},
		created(){
			this.getSQL()
			let that=this
			this.$axios.get("http://localhost:8080/write/contact").then(function(res){
					that.contacter=res.data
				})
		}
	}
</script>

<style>
	
	h3 {
		text-align: left;
		margin-top:0px;
		
	}
</style>

